﻿.mud-dialog{
    background:transparent;
    box-shadow:none;
}
.mud-dialog-title{
    display:none;
}


.welcomeForm {
    background: #eff1ff;
    border-radius: 15px;
    padding: 40px 20px 30px 20px;
}

.dialog-loginForm {
    background: #fff;
    border-radius: 25px;
    padding: 0px;
/*    width:550PX;*/
}
    .dialog-loginForm .header {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #B4A9DA;
        color: #FFF;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        height: 100px;
    }
        .dialog-loginForm .header .title {
            padding-top:15PX;
            font-size: 2.6rem;
            line-height: 2rem;
            font-weight: 900;
        }

/*        .dialog-loginForm p {
            padding-top: 15PX;
   
        }*/

    .dialog-loginForm ._checkbox .mud-ripple {
        padding: 5px 5px 5px 12px;
    }

    .dialog-loginForm .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-width: .5px
    }

    .dialog-loginForm ._button {
        border-radius: 0px;
        color: #fff;
        box-shadow: none;
    }

    .dialog-loginForm .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-radius: 0 !important;
    }


.close-dialog {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 9999;
}

    .close-dialog img {
        height: 24px;
    }

.close-dialog2 {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 9999;
}

    .close-dialog2 img {
        height: 24px;
    }

    .welcomeForm .hero-header {
        background: linear-gradient(135deg, #9078ff 0%, #7e57c2 100%);
        color: #FFF;
        padding: 15px 0 35px 0;
        border-radius: 25px;
        margin-bottom: 10px;
        position: relative;
        overflow: hidden;
    }

        .welcomeForm .hero-header::before {
            content: '';
            position: absolute;
            top: -80px;
            right: -40px;
            width: 200px;
            height: 200px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
        }

.welcomeForm .border-line {
    border: #7030a0 2px solid;
    border-radius: 25px;
    height:300px;
}

.welcomeForm ._button {
    background: #7e57c2;
    text-transform: capitalize;
    margin: 0 15px;
    padding: 10px 0;
    border-radius: 0px;
    color: #fff;
    box-shadow: none;
}
.welcomeForm ._icon {
    color:#a2a1a1;
    font-size:60px;
}

@media (max-width: 600px) {
    .welcomeForm {
        background: #eff1ff;
        border-radius: 15px;
        padding: 5px 5px 25px 5px;
    }
    .dialog-loginForm .header .title {
        font-size: 2.2rem;
        line-height: .5;
    }
    .welcomeForm .border-line {
        border: #7030a0 2px solid;
        border-radius: 15px;
        height: 270px;
    }
    .welcomeForm .hero-header {
        border-radius: 15px;
        padding: 5px 0 15px 0;
    }
    }

@media (max-width: 500px) {
    .dialog-loginForm .header {
        height: auto;
        padding: 5px 0 15px;
    }
    .dialog-loginForm .header .title {
        font-size: 1.6rem;
        line-height: .5;
    }
    .welcomeForm .hero-header .mud-typography-h4 {
        font-size: 1.2rem;
        line-height: .5;
    }
    .welcomeForm .hero-header .mud-typography-body1 {
        font-size: .6rem;

    }
}
@media (max-width: 430px) {
    .dialog-loginForm .header .title {
        font-size: 1.5rem;
        line-height: .5;
    }
}
@media (max-width: 380px) {

    .dialog-loginForm .header .title {
        font-size: 1.3rem;
        line-height: .5;
    }
    .dialog-loginForm .mud-typography-body1 {
        font-size: .8rem;
    }
}